<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商家主页</title>
    <link href="../css/Hui.css" rel="stylesheet" type="text/css" />
    <link href="../plugins/swiper/swiper.min.css" rel="stylesheet" />
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
        }
    </style>
</head>
<body class="H-flexbox-vertical">
<header class="H-header H-theme-background-color9" id="">
    <span onclick="goBack()" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-theme-font-color-white H-padding-horizontal-left-5 H-z-index-100">
        <i class="H-iconfont H-icon-target-back H-font-size-18 H-vertical-middle"></i>
    </span>
    <div class="H-header-title H-vertical-middle H-font-size-18 H-text-show-row-1 H-theme-font-color-white H-position-absolute H-width-100-percent H-box-sizing-border-box" style="padding-left: 45%;">首页</div>
    <span tapmode="" id="drop-menu" data-open="false" class="H-icon H-position-relative H-display-block H-float-right H-vertical-middle H-theme-font-color-white H-padding-horizontal-both-5 H-z-index-1000">
        <i class="H-iconfont H-icon-menu H-font-size-18"></i>
    </span>

    <div class="H-padding-vertical-bottom-10"></div>

</header>

<!-- 新增：所有标签页的内容容器 -->
<div id="tab-container" class="tab-container">




    <!-- 我的内容区域（初始隐藏） -->
    <div id="myDiv" class="tab-content hidden">
        <div class="H-padding-vertical-bottom-10">
            <!-- 加载状态提示 -->
            <div id="myPageLoader" class="H-text-center H-margin-vertical-top-20">
            </div>
            <!-- iframe容器 -->
            <div id="myPageContent" class="H-margin-vertical-top-10 H-width-100-percent H-height-calc-iframe" style="height: 500px;">
                <iframe id="myPageFrame" src="" frameborder="0" class="H-width-100-percent H-height-100-percent"
                style="    height: 55rem;"
                ></iframe>
            </div>
        </div>
    </div>
</div>

<div class="H-main H-flex-item H-position-relative H-overflow-hidden H-overflow-scrolling  H-margin-vertical-top-20"></div>

<footer class="H-footer H-flexbox-horizontal H-theme-background-color-white H-border-vertical-top-after" id="footer">
    <div id="home-tab" class="H-flex-item H-center-all H-text-align-center H-theme-font-color9 H-touch-active tab-active">
        <div>
            <span class="H-icon H-display-block H-line-height-normal">
                <i class="H-iconfont H-icon-update H-font-size-26"></i></span>
            <strong class="H-font-size-11 H-display-block H-font-weight-normal H-margin-vertical-bottom-2">质保录入</strong>
        </div>
    </div>
    <div id="work-tab" class="H-flex-item H-center-all H-text-align-center H-theme-font-color-999 H-touch-active">
        <div>
            <span class="H-icon H-display-block H-line-height-normal">
                <i class="H-iconfont H-icon-search H-font-size-26"></i></span>
            <strong class="H-font-size-11 H-display-block H-font-weight-normal H-margin-vertical-bottom-2">质保查询</strong>
        </div>
    </div>
    <div id="my-tab" class="H-flex-item H-center-all H-text-align-center H-theme-font-color-999 H-touch-active">
        <div>
            <span class="H-icon H-display-block H-line-height-normal">
                <i class="H-iconfont H-icon-user-set H-font-size-26"></i>
            </span>
            <strong class="H-font-size-11 H-display-block H-font-weight-normal H-margin-vertical-bottom-2">个人中心</strong>
        </div>
    </div>
</footer>

<script src="../script/H.js" type="text/javascript"></script>
<script src="../script/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="../plugins/swiper/swiper.min.js"></script>
<script src="../api.js" type="text/javascript"></script>
<script type="text/tailwindcss">
    @layer utilities {
        .content-auto {
            content-visibility: auto;
        }
        .tab-active {
            color: theme('colors.primary');
        }
        .tab-content {
            display: none;
        }
        .active {
            display: block;
        }
        .hidden {
            display: none;
        }
        .H-animate-spin {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .H-height-calc-iframe {
            height: calc(100vh - 200px); /* 根据实际页面高度调整 */
        }
    }
</script>
<script type="text/javascript">
    // 初始化轮播图
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination'
    });
    loadMyPageContent();

    // 底部导航栏切换功能
    $('#footer .H-flex-item').click(function(e) {
        e.preventDefault(); // 阻止默认跳转行为
        // 获取目标标签页的ID
        var targetId = $(this).attr('id').replace('-tab', '');

        // 移除所有标签页的激活状态
        $('#footer .H-flex-item').removeClass('H-theme-font-color9 tab-active');
        $('#footer .H-flex-item').addClass('H-theme-font-color-999');

        // 添加当前标签页的激活状态
        $(this).addClass('H-theme-font-color9 tab-active');
        $(this).removeClass('H-theme-font-color-999');

        // 隐藏所有内容区域
        $('.tab-content').removeClass('active');
        $('.tab-content').addClass('hidden');

        // 显示目标内容区域
        $('#' + targetId + 'Div').removeClass('hidden');
        $('#' + targetId + 'Div').addClass('active');

        // 更新页面标题
        var titleMap = {
            'home': '质保录入',
            'work': '质保查询',
            'my': '个人中心'
        };
        $('.H-header-title').text(titleMap[targetId] || '商家主页');

        // 如果是"我的"页面，加载iframe内容
        if(targetId === "home"){
            loadMyPageContent();
        }
        if(targetId === "work"){
            loadmerchantsearch();
        }
        if(targetId === "my"){
            loadmerchantinfo();
        }
    });

    // 加载我的页面内容
    function loadMyPageContent() {
        var iframe = document.getElementById('myPageFrame');
        var loader = document.getElementById('myPageLoader');
        var content = document.getElementById('myPageContent');

        // 显示加载提示
        loader.style.display = 'block';
        content.style.display = 'none';

        // 设置iframe源并监听加载完成事件
        iframe.onload = function() {
            // 内容加载完成后隐藏加载提示
            loader.style.display = 'none';
            content.style.display = 'block';
        };

        // 设置要嵌入的URL
        // 注意：URL必须允许跨域嵌入(设置了X-Frame-Options或Content-Security-Policy)
        // 否则iframe将显示空白
        iframe.src = '/app/merchantdatainput';
    }
    function loadmerchantsearch() {
        var iframe = document.getElementById('myPageFrame');
        var loader = document.getElementById('myPageLoader');
        var content = document.getElementById('myPageContent');
        loader.style.display = 'block';
        content.style.display = 'none';

        // 设置iframe源并监听加载完成事件
        iframe.onload = function() {
            // 内容加载完成后隐藏加载提示
            loader.style.display = 'none';
            content.style.display = 'block';
        };
        iframe.src = '/app/merchantsearch';
    }

    function loadmerchantinfo() {
        var iframe = document.getElementById('myPageFrame');
        var loader = document.getElementById('myPageLoader');
        var content = document.getElementById('myPageContent');
        loader.style.display = 'block';
        content.style.display = 'none';

        // 设置iframe源并监听加载完成事件
        iframe.onload = function() {
            // 内容加载完成后隐藏加载提示
            loader.style.display = 'none';
            content.style.display = 'block';
        };
        iframe.src = '/app/merchantinfo';
    }


</script>
</body>
</html>